<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>shop</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/shop.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>

		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>
		
	</head>
	<body>
		<!-- 头部区域 -->
		<div class="header1">
			<div class="container">
				<div class="row">
					<div class="col-lg-2 col-12 text-center py-4 h_py">
						<a href="javascript:;">
							<img src="img/logo-header-06.png">
						</a>
					</div>
					<div class="col-lg-6 col-12 py-4 h_py1">
						<form class="h_col form-control border d-flex justify-content-between align-items-center rounded-pill" style=" height: 50px;">
							<!--2.2设置菜单项  nav-item 下拉菜单的区域 dropdown-->
							<span class="nav-item dropdown h_w">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link h_bor" data-toggle="dropdown">MOVIES<i class="fa fa-angle-down pl-2"></i></a>

								<!--2.设置下拉菜单-->
								<span class="dropdown-menu h_coll">
									<a href="#" class="dropdown-item">HOME</a>
									<a href="#" class="dropdown-item">VIDEOS</a>
									<a href="#" class="dropdown-item">FEATURES</a>
									<a href="#" class="dropdown-item">BLOG</a>
									<a href="#" class="dropdown-item">CONTACT</a>
								</span>

							</span>
							<input type="text" placeholder="Search for a Movie..." class="border-0 w-75 pl-4 h_input" style="outline: none;">
							<button type="" class="border-0 btn"><i class="fa fa-search h_btn"></i></button>
						</form>
					</div>
					<div class="col-lg-4 col-12 py-4 d-flex align-items-center h_ul">
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center w-100">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;VIDEO</a>
						</ul>
					</div>
				</div>
			</div>
		</div>


		<div class="h_nav h-auto py-2">
			<!-- navbar-expand-md -->
			<div class="container d-flex justify-content-between align-items-center h_a">
				<div class="navbar p-0 navbar-expand-md h_center">
					<button type="button" class="btn navbar h_btnbg" data-toggle="collapse" data-target="#meu">
						<i class="fa fa-bars"></i>
					</button>
					<i class="border-right mx-3 h_hr" style="height: 30px;"></i>
					<div class="collapse navbar-collapse" id="meu">
						<ul class="nav list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav h_bgg">
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOME</a>
								<span class="nav-item dropdown float-left w-100">
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="index.html" class="dropdown-item">index</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOVIE</a>
								<span class="nav-item dropdown float-left w-100 ">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="shop.html" class="dropdown-item">Shop</a>
										<a href="shop_details.html" class="dropdown-item">shop_details</a>
									</span>
		
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">VIDEOS</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="video.html" class="dropdown-item">Video</a>
										<a href="video_details.html" class="dropdown-item">video_details</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">FEATURES</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="about.html" class="dropdown-item">About</a>
										<a href="submit.html" class="dropdown-item">Submit</a>
										<a href="authors.html" class="dropdown-item">list_authors</a>
										<a href="authors_details.html" class="dropdown-item">authors_details</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">BLOG</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="blog.html" class="dropdown-item">Blog</a>
										<a href="blog_details.html" class="dropdown-item">blog_detail</a>
		
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">CONTACT</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="contact.html" class="dropdown-item">CONTACT</a>
									</span>
								</span>
							</li>
						</ul>
					</div>
		
				</div>
				<!-- 两个图标 -->
				<div class="h_a">
					<a href="javascript:;">
						<i class="fa fa-cloud-upload"></i>
						<span>SUBMIT VIDED</span>
					</a>
					<i class="border-right mx-3"></i>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>IOGIN</span>
					</a>
				</div>
			</div>
		</div>

		<!-- 头部导航栏区域 -->
		<div style="background:url(img/bg-page-title-01.jpg)no-repeat; background-size: cover;" class="h_img">
			<div style="background-color: rgba(0,0,0,0.5); height:270px;">
				<!-- 文字区域 -->
				
				<p align="center" class="" style="padding-top: 100px; font-size: 35px; color: white;">Shop</p>
				<p align="center" class="text-white ">Home / <span class="text-danger">Shop</span></p>

			</div>
		</div>

		<!-- 中部区域 -->
		<div class="" style="background-color: white;">
			<div class="py-5 container" id="mbg">
				<div class="row">
					<div class="col-lg-9 col-12 py-5">
						<ul class="list-unstyled d-flex justify-content-between align-items-center flex-lg-row flex-column">
							<li style="color: gray;">Showng oll 8 results</li>
							<li>
								<input type="number" placeholder="Defout sorting" class="pl-2" />
							</li>
						</ul>
						
						<!-- 线 -->
						<hr style="width: 100%; margin-top: 0px; background-color: gray;" />
						
						<!-- 图片区域 -->
						<ul class="list-unstyled row py-4 h_ulimg">
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-05.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-06.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-07.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-08.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-09.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-10.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-11.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-lg-4 col-md-6 col-12 py-3">
								<div class="overflow-hidden ">
									<img src="img/product-12.jpg" class="w-100 m_img_xiao" >
								</div>
								<p align="center" class="mb-0 pt-2">Best Song CD</p>
								<p align="center"><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
						</ul>
					</div>
					<div class="col-lg-3 col-12 py-5 bor">
						<h5 style="color: black;">CATEGORIES</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film maker</span>
								<span style="color: gray;">32</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film studio</span>
								<span style="color: gray;">32</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Life style</span>
								<span style="color: gray;">16</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span style="color: gray;">08</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film online</span>
								<span style="color: gray;">45</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Film studio</span>
								<span style="color: gray;">32</span>
							</li>
							
						</ul>
						
						<h5 style="color: black;">MOST POPULAR</h5>
						<!-- 三张小图片区域 -->
						<ul class="list-unstyled  py-3 row">
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-53.jpg" class="w-100 m_img_xiao" >
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-54.jpg" class="w-100 m_img_xiao" >
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
							<li class="col-5 py-3">
								<div class="overflow-hidden ">
									<img src="img/post-55.jpg" class="w-100 m_img_xiao" >
								</div>
							</li>
							<li class="col-7 py-3">
								<p style="font-size: 15px; color: gray;" class="py-2 mb-0">Mirum est notare quam littera...</p>
								<p><span style="color: gray; text-decoration: line-through;">￡9.00</span><span style="color: red;">￡7.00</span></p>
							</li>
						</ul>
						
						<!--  -->
						<h5 style="color: black;">TAGS CLOUD</h5>
						<ul class="list-unstyled py-3 d-flex flex-wrap">
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Film Oline</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Greative</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Design</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Landing</button>
							</li>
							<li class="py-2 px-2">
								<button type="button" class="bg-white border px-3" style="color: gray;">Skill</button>
							</li>
						</ul>
						
						<!-- img -->
						<img src="./img/ads-04.jpg" class="w-100 position-sticky sticky-top" />
					</div>
				</div>
			</div>
		</div>

		<!-- 底部区域 -->
		<div class="py-5 " style="background-color : #000000;">
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-12 py-5 text-center f_padd">
						<p align="center">
							<a href="javascript:;"><img src="./img/logo-header-05.png" class=""></a>
						</p>
						<p align="center" class="py-3" style="color: gray;">Lommode ligula eget dolor. Aenean meassa.Cum sociis que
							penatibus et
							magnis dis parturient montes lorenm，nascetur ridiculusmus. Donec quam felis， uitricies nex massa.Cum sociis...</p>
						<!-- 按钮组 -->

						<div class="btn-group pt-3" style="width: 85%;">
							<input type="text" placeholder="Email" style="width: 70%; background-color: #222222; border: 1px solid gray; color: gray; outline: none;">
							<button class="btn text-white font-weight-bold" style="background-color: red;">SUBSCRIBE</button>
						</div>
						<!-- 图标区域 -->
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto py-5" style="width: 70%;">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-lg-4 col-12 py-5 f_padd_2">
						<div class="row">
							<div class="col-12">
								<h5 class="text-white">LATEST POSTS</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-01.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">5 Skin Care Rituals You Should Be Doing Before Bed</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4  py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-02.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">Fashion Outfit Ideas to Try From lnstagram This Week</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-03.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">7 Soaps to Supercharge Your Daily Skincare Routine</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-12 py-5 f_padd_3">
						<h5 class="text-white">POPULAR CATEGORY</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fragrances</span>
								<span class="text-white">15</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Hair Care</span>
								<span class="text-white">12</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Make Up</span>
								<span class="text-white">6</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Outfits</span>
								<span class="text-white">9</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Skin Care</span>
								<span class="text-white">10</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Style</span>
								<span class="text-white">8</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span class="text-white">5</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Lifestyle</span>
								<span class="text-white">2</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Weliness</span>
								<span class="text-white">3</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="py-4 border-top text-center" style="border-color: gray !important; background-color: #000000;">
			<p style="color: gray;" class="mb-0">Copyright 2018 Carporate WordPress Theme Theme by <span><a href="javascript:;"
					 style="color: red; text-decoration: none;">ThimPress</a></span></p>
		</div>
		<!--  -->
		<div class="back">返回顶部</div>
	</body>
</html>
<script>
	$(function() {
		$(document).scrollTop();
		//1.被卷去的头部
		var boxTop = $('#mbg').offset().top;
		$(window).scroll(function() {
			// console.log(11);
			console.log($(document).scrollTop());

			if ($(document).scrollTop() >= boxTop) {
				$('.back').fadeIn();
			} else {
				$('.back').fadeOut();
			}
		})

		//返回顶部
		$('.back').click(function() {
			// $(document).scrollTop(0);
			$('body,html').stop().animate({
				scrollTop: 0
			})
		})
	})
</script>